<template>
  <div>
    <el-upload
      list-type="picture-card"
      action="#"
      :on-preview="preview"
      :on-remove="remove"
      :on-change="change"
      :http-request="upload"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :class="{ close: fileComputed }"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 预览图片的弹出层 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-progress :percentage="percent"
      v-if="showprogress"
      style="width: 180px"
       />
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5"; //引入腾讯云cos包
const cos = new COS({
  // 必须填写自己的id和key，这样才能传到自己的存储桶里面
  SecretId: "AKIDIQItDH3YmkQq0ue7JEsL3UUGn31i7E4e", //身份识别ID
  SecretKey: "KNAhwub1GFxOZT6RWJp42jDQM1PWLuBB", //身份识别秘钥
});
export default {
  name: "HrcmsIndex",
  data() {
    return {
    percent:0,//控制百分比
    showprogress:false,//控制现实进度条
    dialogVisible: false,
    dialogImageUrl: "",
    fileList: [], //图片上传的文件列表
    currentFileUid:null,//记录当前要上传的文件的Uid
    }
  },

  mounted() {},

  methods: {
    preview(file) {
      this.dialogVisible = true
      this.dialogImageUrl = file.url
    },
    // file是要删除的文件的数组，fileList是删除后的数组
    remove(file, fileList) {
      this.fileList = fileList;
    },
    change(file, fileList) {
      this.fileList = fileList.map((item) => item)
    //   console.log(this.fileList);
    },
    beforeUpload(file) {
      const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"]
      if (!types.includes(file.type)) {
        //判断上传的文件的类型是否是我规定的类型，如果不是则返回false
        this.$message.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!")
        return false
      }
      const maxSize = 5 * 1024 * 1024;
      // 判断上传的文件是否是规定的大小，如果是则返回false
      if (file.szie > maxSize) {
        this.$message.error("上传的文件大小不能超过5M")
        return false
      }
    //   已经确定要上传的文件就是这个file
      this.currentFileUid = file.uid
      this.showprogress = true
      return true
    },
    // 执行上传文件的操作
    upload(params) {
      // console.log(params.file);
      // 判断文件是否存在
      if (params.file) {
        cos.putObject({
            Bucket: "wxl9905-15-1301441005" /* 填入您自己的存储桶，必须字段 */,
            Region: "ap-chengdu" /* 存储桶所在地域，例如ap-beijing，必须字段 */,
            Key: params.file
              .name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
            StorageClass: "STANDARD",
            Body: params.file, // 上传文件对象
            onProgress: (progressData) => {
                // console.log(progressData);
                this.percent = progressData.percent * 100
            },
          },(err, data) => {
            // console.log(err || data)
            this.fileList = this.fileList.map(item => {
                // 去找谁的uid等于刚刚记录的uid
                if(item.uid === this.currentFileUid){
                    return { url: 'http://' + data.Location, upload: true }
                // upload 为true 表示这张图片已经上传完毕 这个属性要为我们后期应用的时候做标记
                // 保存  => 图片有大有小 => 上传速度有快又慢 =>要根据有没有upload这个标记来决定是否去保存
                }
                return item
            })
            setTimeout(()=>{
                // 关闭进度条
            this.showprogress = false
            this.percent = 0
            },1000)
             // 将上传成功的地址 回写到了fileList中 fileList变化  => upload组件 就会根据fileList的变化而去渲染视图
          })
      }
    },
  },
  computed: {
    fileComputed() {
      return this.fileList.length === 1
    },
  },
}
</script>

<style>
.el-dialog__header {
  padding: 40px 20px 10px !important;
}
.close .el-upload--picture-card {
  display: none;
}
</style>